<template>
	<view class="content">
		<!-- 分类 -->
		<view class="item">
			<scroll-view scroll-y="true" scroll-into-view="{{scrollTop}}" @scroll="onScrollTw">
				<view  class="view-item" :class="{ active: activeIndex === 6 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 5 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 4 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 3 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 2 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 6 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 5 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 4 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 3 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 2 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 6 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 5 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 4 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 3 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 2 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 6 }"></view>
				<view id="E6" class="view-item" :class="{ active: activeIndex === 5 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 4 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 3 }"></view>
				<view  class="view-item" :class="{ active: activeIndex === 2 }"></view>
			</scroll-view>
		</view>
		<!-- 商品信息 -->
		<view class="goods">
			<scroll-view scroll-y="true" upper-threshold @scroll="onScroll" @scrolltolower="scrolltolower">
				<view class="">
					<view class="text" id="categoryMenu" data-set="text">text</view>
					<view class="goods_list" v-for="(item,index) in goods_list" key="index">
						<view class="goods-item">
							{{item}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="text" id="categoryMenu" data-set="text1">text1</view>
					<view class="goods_list" v-for="(item,index) in goods_list" key="index">
						<view class="goods-item">
							{{item}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6, 7, 8,
					9, 10, 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6,
					7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
				],
				activeIndex:2,
				scrollTop:0
			}
		},
		onLoad() {

		},
		methods: {
			scrolltoupper() {
				console.log("123");
			},
			onScroll(e){
				this.calcSize()
			},
			calcSize(){
				let that = this;
							// 这里是真的坑!!! 微信里没法绑定获取，暂时只能这样了
							// let view = uni.createSelectorQuery().select('#categoryMenu');
							let view = uni.createSelectorQuery();
							let view = uni.createSelectorQuery().selectorQuery.selectViewport('#categoryMenu')
							console.log(view);
							view.selectAll('#categoryMenu').boundingClientRect(data => {
								// console.log(data);
							let  result = data.filter(item => item.top >= 10 && item.top <= 40);
								// console.log(result[0].dataset.set);
								if(result[0].dataset.set=='text1'){
									this.$data.activeIndex = 2
								}else{
									this.$data.activeIndex = 5
								}
								}).exec();
							view.selectAll(".active").boundingClientRect(data => {
								this.$data.scrollTop = 'E6'
							}).exec();
			},
			scrolltolower(){
				console.log("123");
			},
			onScrollTw(){
				this.$data.scrollTop = '0'
			}
		},
		onReachBottom(){
			console.log(123);
			this.setDate({
				goods_list: 123
			})
		}
	}
</script>
<style>
	@import url("index.css");
</style>